<template>
  <el-card class="avue_height">
    <el-row :gutter="12" class="goBusiness">
      <el-col :span="4">
        <el-card :shadow="businessType=='02'?'always':'hover'" style="cursor: pointer;">
          <div @click="goBusiness('02')">
            <h3 style="margin:0;padding:10px 0;text-align:center">商超</h3>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card :shadow="businessType=='03'?'always':'hover'" style="cursor: pointer;">
          <div @click="goBusiness('03')">
            <h3 style="margin:0;padding:10px 0;text-align:center">洗衣</h3>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card :shadow="businessType=='04'?'always':'hover'" style="cursor: pointer;">
          <div @click="goBusiness('04')">
            <h3 style="margin:0;padding:10px 0;text-align:center">家政</h3>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card :shadow="businessType=='05'?'always':'hover'" style="cursor: pointer;">
          <div @click="goBusiness('05')">
            <h3 style="margin:0;padding:10px 0;text-align:center">咖吧</h3>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div style="margin:10px 0px 20px 0px;">
      <template v-for="(item,index) in btn">
        <el-button
          type="primary"
          :key="index"
          @click="handler(index)"
          v-if="item.isShow"
        >{{item.title}}</el-button>
      </template>
    </div>
    <avue-crud
      ref="crud"
      style="width:100%"
      :data="loadData"
      :option="tableOption"
      :table-loading="loading"
    >
      <template slot="categoryIcon" slot-scope="scope">
        <el-image
          style="width: 50px; height: 50px"
          :src=" scope.row.categoryIcon"
          :preview-src-list="[ scope.row.categoryIcon]"
        ></el-image>
      </template>
      <template slot="flag" slot-scope="scope">
        <el-switch v-model="scope.row.flag" @change="(value) => switchChange(value,scope.row)"></el-switch>
      </template>
      <template slot="menu" slot-scope="scope">
        <el-button
          @click="edit(scope.row)"
          type="text"
          icon="el-icon-edit"
          :disabled="scope.row.disabled"
        >编辑</el-button>
        <el-button
          @click="del(scope.row)"
          type="text"
          icon="el-icon-delete"
          :disabled="scope.row.disabled"
          v-if="!scope.row.delFlag"
        >删除</el-button>
      </template>
    </avue-crud>
    <template>
      <div style="width:100%;position:relative;height:50px">
        <el-pagination
          :page-sizes="[5, 10,15,20, 25, 50]"
          :pager-count="7"
          :current-page="page.current"
          :page-size="page.size"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin:2% 0;position:absolute;right:1%"
          background
          @size-change="sizeChange"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </template>
    <addCategory ref="addCategory" />
  </el-card>
</template>

<script src='./index.js'></script>

<style lang="scss">
.goBusiness {
  margin: 10px 0;
  .el-card__body {
    padding: 0;
  }
  .el-card.is-always-shadow,
  .el-card.is-hover-shadow:focus,
  .el-card.is-hover-shadow:hover {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5)!important
  }
}
</style>